<template>
    <div class="info-container">
        <el-card class="info-card">
            <template #header>
                <div>
                    <span style="font-size: 18px; font-weight: 800;">个人信息</span>
                </div>
            </template>
            <div class="icon">
                <div class="pic">
                    <img src="../../../../assets/img/logo.png" class="avatar" />
                </div>
                <el-upload class="avatar-uploader" action="api/user/changeIcon" 
                :on-success="changeIcon"
                :before-upload="beforeAvatarUpload">
                    <el-button class="button">点击上传头像</el-button>
                </el-upload>
            </div>
            
            <el-table :data="[userData]" style="width: 100%;"
            :cell-style="{'text-align':'center'}"
            :header-cell-style="{'text-align':'center', 'color':'#b22222'}">
                <el-table-column prop="userName" label="您的名称"></el-table-column>
                <el-table-column prop="userSchool" label="您的学校"></el-table-column>
            </el-table>
            <br>
            <el-table :data="[userData]" style="width: 100%;"
            :cell-style="{'text-align':'center'}"
            :header-cell-style="{'text-align':'center', 'color':'#b22222'}">
                <el-table-column prop="userName" label="您的名称"></el-table-column>
                <el-table-column prop="userSchool" label="您的学校"></el-table-column>
            </el-table>
            <br>
            <el-button class="button" @click="handleEdit">修改信息</el-button>
        </el-card>
    </div>

    <!-- 模态框 -->
    <el-row>
        <template v-if="modelForm.dialogFormVisible">
            <div class="model">
                <el-dialog :title="modelForm.title" v-model="modelForm.dialogFormVisible" width="30%">
                    <el-form :model="modelData" label-position="left" label-width="auto">
                        <el-form-item label="您的名称:">
                        <el-input v-model="modelData.userName" placeholder="请输入您的名称"></el-input>
                        </el-form-item>
                        <el-form-item label="您的学校:">
                        <el-input v-model="modelData.userSchool" placeholder="请输入您的学校"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="dialog-footer">
                        <slot name="footer">
                        <el-button class="button" @click="closeModel()">取 消</el-button>
                        <el-button class="button" @click="reset()">重 置</el-button>
                        <el-button class="button" type="primary" @click="submit()">提 交</el-button>
                        </slot>
                    </div>
                </el-dialog>
            </div>
        </template>    
    </el-row>
</template>


<script setup>
import {ref, reactive, onMounted} from 'vue';
import {ElForm, ElFormItem, ElInput, ElButton, ElTable, ElTableColumn, ElPagination} from 'element-plus';
import {Edit, Delete, Key} from '@element-plus/icons-vue';
import axios from 'axios';
import { el } from 'element-plus/es/locales.mjs';

axios.defaults.headers.common['Authorization'] = `Bearer` + localStorage.getItem('token');

// 个人信息表格数据
const userData = ref(
    {
        userName: localStorage.getItem('userName'),
        userSchool: '家里蹲大学',
        userIcon:''
    }
);

// 模态框信息
const modelForm = reactive({
  input: '',
  title: '',
  dialogFormVisible: false,
})

const modelData = reactive({
    userName: '',
    userSchool: '',
})

// 个人表格查询
const queryForm = reactive({
  userName: localStorage.getItem('userName'),
});


// 模拟获取数据的函数
const fetchData = async (queryForm) => {

  console.log("查询,参数为：{}",queryForm);
  const params = {
    userName: queryForm.userName,
  };
  const result = await axios.get("/api/user/userInfo",{params});
  console.log(result.data);
  if (result.data.code) {
    userData.value = result.data.data.records;
  }
};

// 实现编辑逻辑
const handleEdit = () => {

  reset();
  if(userData){
    modelData.userName = userData.value.userName
    modelData.userSchool = userData.value.userSchool
    console.log(modelData)
  }
  
  modelForm.dialogFormVisible = true;
  modelForm.title = '修改您的信息';
};

// 提交编辑信息
const submit = () => {

  modelForm.dialogFormVisible = false;
//   // 提交修改结果
//     axios.put('/api/user/userInfo', modelData).then(res => {
//         if(res.data.code === '1'){
//           msg("success","修改成功");
//         }else{
//           msg("error", res.data.message);
//         }
//       modelForm.dialogFormVisible = false;
//       localStorage.setItem('userName', userData.value.userName)
//       onMounted();
//   })
  // 模拟修改结果
  userData.value.userName = modelData.userName
  userData.value.userSchool = modelData.userSchool
  localStorage.setItem('userName', userData.value.userName)
}

// 清空模态框
const reset = () => {
  modelData.userName = null
  modelData.userSchool = null
}

// 关闭模态框
const closeModel = () => {
  modelForm.dialogFormVisible = false;
}

// 初始化数据
onMounted(() => {
  fetchData(queryForm);
});
</script>

<style scoped>
.info-container {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

.info-card {
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
}

.button {
    background-color: #b22222;
    color: #ffffff;
}

.model :deep(.el-dialog) {
    border-radius: 15px;
    font-weight: 700;
    width: 30%;
}

.icon {
    margin: 30px auto 30px 150px;
    display: flex;
}

</style>